
<template>
  <div class="clearfix tabs" v-if="tabs.length">
    <span
      v-for="(item, index) in tabs"
      :key="index"
      :class="{ active: index == num }"
      @click="tab(index)"
    >
      {{ item }}
    </span>
  </div>
</template>

<script>
export default {
  components: {},
  name: "tabs",
  props: {
    tabs: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      show: false,
      num: 0,
    };
  },
  created() {},
  mounted() {},
  methods: {
    tab(index) {
      this.num = index;
      this.$emit("tab", index);
    },
  },
};
</script>
<style scoped>
.tabs {
  height: 39px;
  line-height: 39px;
  font-size: 14px;
}
.tabs span {
  display: inline-block;
  width: 94px;
  margin-right: 10px;
  text-align: center;
  color: rgba(51, 51, 51, 0.5);
}
.tabs .active {
  color: #333333;
  border-bottom: 2px solid #0B085F;
}
</style>
